<template>
  <a-card>
    <div class="account-center-avatarHolder">
      <div class="avatar">
        <!-- <img :src="getAvatar()"/> -->
        <img :src="info.photo" onerror="handleErrrImage" />
      </div>
      <div class="username">{{ info.name }}<a-icon :type="info.type" /></div>
      <div class="info">{{ info.age }}岁  {{ info.className }}</div>
      <div class="contact"><a-icon type="phone" />{{ info.phone }}</div>
    </div>
  </a-card>
</template>
<script>
import { getFileAccessHttpUrl, getAction } from '@/api/manage';
import man from '@/assets/man.png'
import woman from '@/assets/woman.png'
import avatar from '@/assets/default.png'

export default {
  name: 'info',
  data() {
    return {
      url: {
        studentInfo: "management/skStudent/queryById",
      },
      info: {
        photo: avatar,
        avatar: avatar,
        name: '',
        type: '',
        age: '',
        className: '',
        phone:''
      },
      studentId: '',
      dataDate: '',
      nextDate: '',
    }
  },
  props:[],
  components: {},

  filters: {},
  
  computed: {},
  
  created() {
  },
  
  activated() {
  },

  mounted() {
  },

  methods: {
    load(dataForm) {
      this.studentId = dataForm.studentId
      this.info.className = dataForm.className
      this.loadInfo();
    },
    loadInfo() {
      const params = {
        id: this.studentId?this.studentId:"",
      }
      getAction(this.url.studentInfo, params).then(res => {
        if(res.success) {
          console.log('studentInfo', res.result);
          const stuData = res.result;
          this.info.name = stuData.name
          this.info.photo = stuData.photo ? getFileAccessHttpUrl(stuData.photo) : this.info.avatar
          this.info.type = stuData.sex == '1' ? 'man' : 'woman'
          this.info.phone = stuData.phone
          this.info.age = this.getAge(stuData.birthday)
          console.log(this.info)
        } else {
          this.info = {
            photo: avatar,
            avatar: avatar,
            name: '',
            type: '',
            age: '',
            className: '',
            phone:''
          }
          this.$message.warning(res.message);
        }
      })
    },
    handleErrorImage() {
      this.info.photo = this.info.avatar
    },
    getAge(birthday){//根据日期算年龄
      if(birthday){
        birthday=birthday.split('-');
        // 新建日期对象
        let date = new Date();
        // 今天日期，数组，同 birthday
        let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
        // 分别计算年月日差值
        let age = today.map((val, index) => {
            return val - birthday[index]
        })
        // 当天数为负数时，月减 1，天数加上月总天数
        if (age[2] < 0) {
            // 简单获取上个月总天数的方法，不会错
            let lastMonth = new Date(today[0], today[1], 0)
            age[1]--
            age[2] += lastMonth.getDate()
        }
        // 当月数为负数时，年减 1，月数加上 12
        if (age[1] < 0) {
            age[0]--
            age[1] += 12
        }
        return age[0]
      }
    },
  }
}
</script>
<style scoped lang="less">
  
.page-header-wrapper-grid-content-main {
    width: 100%;
    height: 100%;
    min-height: 100%;
    transition: .3s;

    .account-center-avatarHolder {
      text-align: center;
      // margin-bottom: 24px;

      & > .avatar {
        margin: 5px auto;
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;
        
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .username {
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        margin-bottom: 20px;
      }

      .info, .contact {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 10px;
      }
    }

    .life .ant-statistic-content {
      width: 100px;
      background-color: #1890ff;
      text-align: center;
    }
  }

</style>